<template>
  <div id="app">
    <!-- 导航栏 -->
    <header class="navbar">
      <div class="navbar-container">
        <div class="navbar-brand">
          <router-link to="/">购物网站</router-link>
        </div>
        
        <nav class="navbar-nav">
          <router-link to="/" class="nav-link">首页</router-link>
          <router-link to="/about" class="nav-link">关于我们</router-link>
        </nav>
        
        <div class="navbar-user">
          <div v-if="currentUser" class="user-info">
            <span>欢迎，{{ currentUser.username }}</span>
            <router-link to="/membership" class="btn-membership">会员中心</router-link>
            <button @click="handleLogout" class="btn-logout">登出</button>
          </div>
          <div v-else class="auth-buttons">
            <router-link to="/login" class="btn-login">登录</router-link>
            <router-link to="/register" class="btn-register">注册</router-link>
          </div>
        </div>
      </div>
    </header>
    
    <!-- 滚动商品介绍 -->
    <div class="scroll-banner">
      <div class="scroll-content" ref="scrollContent">
        <div class="scroll-item">🔥 新品上市：智能手表，超长续航，仅售¥1299！</div>
        <div class="scroll-item">🎉 限时特惠：全场电子产品8折起，不容错过！</div>
        <div class="scroll-item">🌟 热卖爆款：无线耳机，降噪技术，音质出众！</div>
        <div class="scroll-item">💎 会员专享：积分双倍，兑换精美礼品！</div>
        <div class="scroll-item">🚚 全场免邮：单笔订单满¥99元，包邮到家！</div>
      </div>
    </div>
    
    <!-- 主内容区域 -->
    <main class="main-content">
      <router-view />
    </main>
    
    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-container">
        <p>&copy; 2024 购物网站 版权所有</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { getCurrentUser, logout } from './services/auth';

const router = useRouter();
const currentUser = ref(null);
const scrollContent = ref(null);
let scrollInterval = null;

// 初始化时检查用户登录状态
onMounted(() => {
  updateUserStatus();
  startScrollAnimation();
});

// 清理定时器
onUnmounted(() => {
  stopScrollAnimation();
});

// 更新用户状态
const updateUserStatus = () => {
  currentUser.value = getCurrentUser();
};

// 处理用户登出
const handleLogout = () => {
  logout();
  updateUserStatus();
  router.push('/');
};

// 开始滚动动画
const startScrollAnimation = () => {
  if (!scrollContent.value) return;
  
  // 克隆第一个元素到最后，确保无缝滚动
  const firstItem = scrollContent.value.firstElementChild;
  const clone = firstItem.cloneNode(true);
  scrollContent.value.appendChild(clone);
  
  // 设置滚动定时器
  scrollInterval = setInterval(() => {
    if (!scrollContent.value) {
      stopScrollAnimation();
      return;
    }
    
    scrollContent.value.scrollLeft += 1;
    
    // 当滚动到克隆元素时，重置到原始第一个元素的位置
    if (scrollContent.value.scrollLeft >= firstItem.offsetWidth) {
      scrollContent.value.scrollLeft = 0;
    }
  }, 20);
};

// 停止滚动动画
const stopScrollAnimation = () => {
  if (scrollInterval) {
    clearInterval(scrollInterval);
    scrollInterval = null;
  }
};
</script>

<style>
/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
}

/* 导航栏样式 */
.navbar {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.navbar-brand a {
  font-size: 1.5rem;
  font-weight: bold;
  color: #42b983;
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  gap: 20px;
}

.nav-link {
  color: #333;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-link:hover {
  background-color: #f0f0f0;
}

/* 滚动商品介绍样式 */
.scroll-banner {
  background-color: #ff6b6b;
  color: white;
  padding: 10px 0;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-content {
  display: inline-flex;
  animation: scroll 30s linear infinite;
}

.scroll-content:hover {
  animation-play-state: paused;
}

.scroll-item {
  margin-right: 50px;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0 10px;
}

/* 滚动动画 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 响应式调整滚动区域 */
@media (max-width: 768px) {
  .scroll-banner {
    padding: 8px 0;
  }
  
  .scroll-item {
    font-size: 0.75rem;
    margin-right: 30px;
  }
}

.navbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.auth-buttons {
  display: flex;
  gap: 10px;
}

.btn-login, .btn-register, .btn-logout, .btn-membership {
  padding: 8px 16px;
  border: 1px solid #42b983;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.875rem;
}

.btn-login {
  background-color: #fff;
  color: #42b983;
}

.btn-login:hover {
  background-color: #f0f0f0;
}

.btn-register {
  background-color: #42b983;
  color: #fff;
}

.btn-register:hover {
  background-color: #35495e;
}

.btn-logout {
  background-color: #fff;
  color: #ff4d4f;
  border-color: #ff4d4f;
}

.btn-logout:hover {
  background-color: #fff2f0;
}

.btn-membership {
  background-color: #fff;
  color: #4285f4;
  border-color: #4285f4;
}

.btn-membership:hover {
  background-color: #f0f9ff;
}

/* 主内容区域 */
.main-content {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
  min-height: calc(100vh - 140px);
}

/* 页脚样式 */
.footer {
  background-color: #333;
  color: #fff;
  padding: 20px 0;
  text-align: center;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navbar-container {
    flex-direction: column;
    height: auto;
    padding: 10px;
  }
  
  .navbar-nav {
    margin: 10px 0;
  }
  
  .navbar-user {
    margin-top: 10px;
  }
}
</style>